//尝试创建一个可以执行简单动画的函数
/*
     参数;
       obj 要执行动画的对象
       attr 要执行动画的样式  比如：left top width height
       target 执行动画的目标位置
       speed 移动的速度(正数向右移动，负数向左移动)
       callback 回调函数，这个函数将会在动画执行完毕以后执行
 */
function move(obj, attr, target, speed, callback) {

    //关闭上一个定时器
    clearInterval(obj.timer);

    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr));

    //判断速度的正负值
    //如果从0向800移动，则speed为正
    //如果从800向0移动，则speed为负
    if (current > target) {
        //此时速度应为负值
        speed = -speed;
    }

    //开启一个定时器，用来执行动画效果
    //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    obj.timer = setInterval(function () {

        //获取box1的原来的left值
        var oldValue = parseInt(getStyle(obj, attr));

        //在旧值的基础上增加
        var newValue = oldValue + speed;

        //判断newValue是否大于800
        //从800向0移动
        //向右移动时，需要判断newvalue是否大于target
        //向左移动时，需要判断newvalue是否小于target
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }

        //将新值设置给box1
        obj.style[attr] = newValue + "px";

        //当元素移动到0px时，使其停止执行动画
        if (newValue == target) {
            //达到目标，关闭定时器
            clearInterval(obj.timer);
            //动画执行完毕，调用回调函数
            callback && callback();
        }
    }, 30)
}
function getStyle(obj, name) {

    if (window.getComputedStyle) {
        //正常浏览器的方法,具有getComputedStyle()方法
        return getComputedStyle(obj, null)[name];
    } else {
        //IE8的方法，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }

}


//定义一个函数，用来向一个元素中添加指定的class属性值
/*
  参数：
    obj 要添加class属性的元素
    cn 要添加的class值
 */
function addClass(obj, cn) {

    //检查obj中是否有cn
    if (!hasclass(obj, cn)) {
        obj.className += " " + cn;
    }
}

/*
   判断一个元素中是否含有指定的class属性值
    如果有该class ，则返回true，没有则返回false
 */
function hasclass(obj, cn) {

    //判断obj中有没有cn class
    //创建一个正则表达式
    // var reg = /\bb2\b/;
    var reg = new RegExp("\\b" + cn + "\\b")

    return reg.test(obj.className);
}

/*
     删除一个元素中的指定的class属性
 */
function removeclass(obj, cn) {
    //创建一个正则表达式
    var reg = new RegExp("\\b" + cn + "\\b");

    //删除class
    obj.className = obj.className.replace(reg, "");
}

/*
      toggeclass可以用来切换一个类
         如果元素中具有该类，则删除
         如果元素中没有该类，则添加
 */
function toggeclass(obj, cn) {

    //判断obj中是否有cn
    if (hasclass(obj, cn)) {
        //有，则删除
        removeclass(obj, cn);
    } else {
        //没有，则添加
        addClass(obj, cn);
    };
};


function toggleMenu(obj) {
    //在切换之前，获取元素的高度
    var begin = obj.offsetHeight;

    //切换parentDiv的显示
    toggeclass(obj, "collapsed");

    //在切换类之后获取一个高度
    var end = obj.offsetHeight;
    //console.log("begin = " + begin + ", end = " + end);
    //动画效果就是将高度从begin向end过渡
    //将元素的高度重置为begin
    //parentDiv.style.height = begin + "px";

    //执行动画，从bengin向end过渡
    move(obj, "height", end, 10, function () {
        //动画执行完毕，内联样式已经没有存在的意义了，删除之
        obj.style.height = "";
    })
}